<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>部门管理</title>
    <#-- 使用相对当前模板文件的路径 再去找另一个模板文件 -->
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
    <#include "/common/link.ftl">
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl">
    <!--定义一个变量  用于菜单回显-->
    <#assign currentMenu="department"/>
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
    <#include "/common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>按照<font style="color: gray;font-size: 32px">${a}</font>分组统计报表</h1>
        </section>
        <section class="content">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 800px;height:600px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));


                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['总订单数', '总消费金额', '总实收金额','总优惠金额']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ${groupType},
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额（元）',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '数量',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    // bar柱状图
                    // line折线图
                    series: [
                        {
                            name: '总订单数',
                            type: 'line',
                            yAxisIndex: 1,
                            data:${number}
                        },
                        {
                            name: '总消费金额',
                            type: 'bar',
                            data: ${total_amount}
                        },
                        {
                            name: '总实收金额',
                            type: 'bar',
                            data: ${pay_amount}
                        },
                        {
                            name: '总优惠金额',
                            type: 'bar',
                            data: ${disAmountList}
                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </section>
    </div>
    <#include "/common/footer.ftl" >
</div>




</body>

</html>
